<template>
  <div>
      <header>
          <h1>我的生活压力大</h1>
          <div class="logo"></div>
      </header>
      <footer>
          <h2>very happy!</h2>
          
      </footer>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
// 传统CSS
// header{
//     width: 96px;
// }
// header h1{
//     font-size: 18px;
//     color:green;
// }
// header .logo{
//     width: 300px;
//     height: 150px;
//     background:darkred;
// }
//less写法
header{
    width: 960px;
    h1{
        font-size: 18px;
        color:green;
    }
    .logo{
        width: 300px;
        height: 150px;
        background: darkblue;
        &:hover{
            background: darkred;
        }
    }
}


</style>